<template>
  <zeda-dialog
    v-model="visible"
    title="报警详情"
    width="1000px"
    :before-close="handleClose"
  >
    <aps-form
      :config="apsForm.formConfig"
      :model="apsForm.formData"
      :formRef="apsForm.formRef"
      :labelWidth="apsForm.labelWidth"
      ref="form"
    ></aps-form>
    <form-button
      slot="footer"
      :loading="loading"
      @cancel="handleClose"
      :submitText="'确定'"
      @submit="submit"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import { getWmeterDetail, wmeterRelease } from "@/api/maintenance/electric.js";

import FormButton from "@/components/FormButton";
import { formatDate, dealElectricity } from "@/utils/index";

export default {
  dicts: ["device_alarm_type", "wmeter_device_model", "subentry_type"],
  components: {
    FormButton,
  },
  props: {
    id: {
      type: [Number, String],
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    operateTitle: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false, // 按钮加载中判断
      apsForm: {
        formRef: "form",
        formData: {},
        labelWidth: "auto",
        formConfig: {
          formAttr: {
            // inline: true,
            "label-position": "right",
            size: "small",
            bsColumn: {
              col: 3,
              middle: true,
            },
            rules: {},
          },
          properties: {
            alarmStatus: {
              label: "报警单状态",
              typeName: "aps-des",
            },
            alarmType: {
              label: "报警原因",
              typeName: "aps-des",
            },
            alarmStartTime: {
              label: "报警时间",
              typeName: "aps-des",
            },

            deviceCode: {
              label: "设备编码",
              typeName: "aps-des",
            },
            deviceModel: {
              label: "设备型号",
              typeName: "aps-des",
            },
            deviceName: {
              label: "设备名称",
              typeName: "aps-des",
            },

            subentryType: {
              label: "分项类型",
              typeName: "aps-des",
            },
            caliber: {
              label: "口径",
              typeName: "aps-des",
            },
            cardNum: {
              label: "物联网卡号",
              typeName: "aps-des",
            },

            installLocation: {
              bsColumn: {
                col: 1,
                middle: true,
              },
              label: "安装位置",
              typeName: "aps-des",
            },
            page1: {
              typeName: "el-page-header",
              style: `margin-left:-100px;display: flex;border-bottom: 2px solid #d1d1d1;
                  padding-bottom: 8px;font-weight: 600;`,
              class: "aps-header1 aps-header",
              bsColumn: {
                col: 1,
              },
              content: "",
            },
            handleTime: {
              label: "处理时间",
              typeName: "aps-des",
              display: true,
            },
            userName: {
              label: "处理人",
              typeName: "aps-des",
              display: true,
            },
            phoneNum: {
              label: "联系电话",
              typeName: "aps-des",
              display: true,
            },
            remarks: {
              bsColumn: {
                col: 1,
                middle: true,
              },
              label: "结果描述",
              typeName: "aps-des",
              display: true,
            },
            msg: {
              bsColumn: {
                col: 1,
                middle: true,
              },
              label: "结果描述",
              typeName: "el-input",
              type: "textarea",
              rows: 4,
              maxlength: 200,
              placeholder: "请输入备注",
              display: true,
            },
          },
        },
      },
    };
  },
  watch: {
    visible(value) {
      if (value) {
        if (this.operateTitle == "报警详情") {
          this.apsForm.formConfig.properties.handleTime.display = false;
          this.apsForm.formConfig.properties.userName.display = false;
          this.apsForm.formConfig.properties.phoneNum.display = false;
          this.apsForm.formConfig.properties.remarks.display = false;
          this.apsForm.formConfig.properties.msg.display = true;
        } else {
          this.apsForm.formConfig.properties.handleTime.display = true;
          this.apsForm.formConfig.properties.userName.display = true;
          this.apsForm.formConfig.properties.phoneNum.display = true;
          this.apsForm.formConfig.properties.remarks.display = true;
          this.apsForm.formConfig.properties.msg.display = false;
        }
        if (String(this.id).length > 0) {
          this.getDetails();
        }
      }
    },
  },
  methods: {
    getDetails() {
      getWmeterDetail(this.id)
        .then((res) => {
          console.log(res);
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          let result = res?.data ?? {};
          if (Object.keys(result).length > 0) {
            let arr = [
              {
                label: "未处理",
                value: "0",
              },
              {
                label: "已处理",
                value: "1",
              },
            ];
            result.alarmStatus = this.findLabel(arr, result.alarmStatus);
            let brr = this.dict.type.device_alarm_type;
            result.alarmType = this.findLabel(brr, result.alarmType);
            let crr = this.dict.type.wmeter_device_model;
            result.deviceModel = this.findLabel(crr, result.wmeterDeviceModel);
            let drr = this.dict.type.subentry_type;
            result.subentryType = this.findLabel(drr, result.wmeterDeviceModel);
          }
          this.$refs?.form?.setFieldsValue(result);
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!");
        });
    },
    findLabel(arr, valueNum) {
      let result = "";
      if (arr.length > 0) {
        arr.map((item) => {
          if (valueNum == item.value) {
            result = item.label;
          }
        });
      }
      return result;
    },
    submit() {
      if (this.operateTitle == "报警详情") {
        this.handleClose();
      } else {
        // 处理报警
        const data = {
          alarmIdList: [this.id],
          remark: this.$refs?.form?.getFieldsValue().msg,
        };
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.$confirm(`确认要保存吗?`, "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            })
              .then(() => {
                this.loading = true;
                wmeterRelease(data)
                  .then((res) => {
                    this.loading = false;
                    if (res.code === 700) {
                      this.$message.warning(res.msg);
                      return false;
                    }
                    this.$message.success("操作成功");
                    this.handleClose(true);
                  })
                  .catch(() => {
                    this.loading = false;
                    // this.$message.error("系统错误,请联系管理员!错误码317003");
                  });
              })
              .catch(() => {});
          } else {
            return false;
          }
        });
      }
    },
    handleClose(status) {
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
  .map {
    display: flex;
    .el-input {
      margin-right: 10px;
    }
  }
}
::v-deep .el-page-header__content {
  color: #30c6ff;
  // font-size: $t-font-m-size;
}
::v-deep .el-form-item__content {
  margin-left: 15px !important;
  .aps-header1 {
    // color: #00f1fd;
    .el-page-header__left {
      visibility: hidden;
    }
  }
  .des-value {
    text-align: left;
  }
}
</style>
